<script>
export default {
  name: "side-cribs",
  computed: {
    arrowIcon() {
      if (this.direction === 'left') {
        if (this.isOpen) {
          return require('@/assets/sidebar_button_left.svg')
        } else {
          return require('@/assets/sidebar_button_right.svg')
        }
      } else {
        if (this.isOpen) {
          return require('@/assets/sidebar_button_right.svg')
        } else {
          return require('@/assets/sidebar_button_left.svg')
        }
      }
    }
  },
  data() {
    return {
      direction: 'left',
      isOpen: false,
      checkedCrib: '',
      cribList: [],
      isAdd: false,
      inputValue: '',
      messageList: []
    }
  },
  mounted() {
    this.getCribList()
  },
  methods: {
    getCribList() {
      this.$http.getFolderList().then(res => {
        if (Array.isArray(res)) {
          this.cribList = res
        } else {
          this.$message.error(res)
        }
      })
    },
    getMessageList() {
      // 获取消息
      this.$http.getFolderMessage({
        id: this.checkedCrib
      }).then(res => {
        this.messageList = res.filter(el => !el.used)
      })
    },
    handleCollapse() {
      this.isOpen = !this.isOpen
    },
    handleChangeArrow() {
      if (this.direction === 'left') {
        this.direction = 'right'
      } else {
        this.direction = 'left'
      }
    },
    handleChangeCrib(item) {
      this.checkedCrib = item
      this.getMessageList()
    },
    handleShowAdd() {
      this.isAdd = true
    },
    handleCloseAdd() {
      this.isAdd = false
      this.inputValue = ''
    },
    handleSave() {
      this.$http.addFolderMessage({
        id: this.checkedCrib,
        message: [this.inputValue]
      }).then(res => {
        this.$message({
          type: 'success',
          message: this.$t('Success')
        })
        this.getMessageList()
      })
    },
    handleUsed(item) {
      this.$http.updateFolderMessageStatus({
        id: this.checkedCrib,
        info: {
          messageIds: [item.id],
          used: true
        }
      }).then(res => {
        this.$message({
          type: 'success',
          message: this.$t('Success')
        })
        this.getMessageList()
      })
    }
  }
}
</script>

<template>
  <div :class="['side-cribs', direction, isOpen ? 'open' :'']">
    <div class="frame">
      <div class="frame-top">
        <el-select v-model="checkedCrib" @change="handleChangeCrib">
          <el-option v-for="item in cribList" :value="item.id" :label="item.name"></el-option>
        </el-select>
        <div  style="flex-shrink: 0">
          <el-button type="primary" icon="el-icon-plus" @click="handleShowAdd"></el-button>
          <el-button type="primary" :icon="direction === 'left' ? 'el-icon-arrow-right' : 'el-icon-arrow-left'" @click="handleChangeArrow"></el-button>
        </div>
      </div>
      <div class="frame-content">
        <div class="input-box" v-show="isAdd">
          <el-input :placeholder="$t('Add Message')" v-model="inputValue" class="dark_input"></el-input>
          <div style="flex-shrink: 0">
            <el-button type="primary" icon="el-icon-close" @click="handleCloseAdd"></el-button>
            <el-button type="primary" icon="el-icon-check" @click="handleSave"></el-button>
          </div>
        </div>
        <div class="msg-list">
          <div class="msg-item" v-for="(item,index) in messageList">
            <div class="msg-index">{{ index + 1}}</div>
            <div class="msg-text">{{ item.name }}</div>
            <el-button type="primary" icon="el-icon-document-checked" @click="handleUsed(item)"></el-button>
          </div>
        </div>
      </div>
    </div>
    <img :src="arrowIcon" class="svg-icon height_56px label ng-star-inserted" alt="" @click="handleCollapse">
  </div>
</template>

<style scoped lang="scss">
.side-cribs {
  position: fixed;
  top: calc(50% + (min(4rem,2.917vw) + 0.571rem)/2 - (min(1.786rem,1.302vw)/2) - 30.893rem);
  left: -40rem;
  z-index: 20;
  display: flex;
  align-items: center;
  height: 61.786rem;
  max-height: 98vh;
  font-family: Inter,"sans-serif";
  transition: .2s ease-in-out;
  &.open {
    transform: translate(40rem);
  }
  &.right {
    right: -40rem;
    left: initial;
    flex-direction: row-reverse;
  }
  &.right.open {
    transform: translate(-40rem);
  }
  .frame {
    display: flex;
    flex-direction: column;
    gap: 0.714rem;
    width: 40rem;
    height: 100%;
    padding: 1.143rem 0.857rem;
    border: 0.063rem solid rgba(43,67,83,.4);
    border-radius: 0 1.143rem 1.143rem 0;
    background-color: #0e222ee6;
    -webkit-backdrop-filter: blur(.143rem);
    backdrop-filter: blur(0.143rem);
    .frame-top {
      display: flex;
      gap: 0.571rem;
    }
    .frame-content {
      display: flex;
      flex-direction: column;
      gap: 0.143rem;
      height: calc(100% - 4.143rem);
      .input-box {
        display: flex;
        gap: 1.143rem;
        height: 5rem;
        margin-right: 0.429rem;
        padding: 0.571rem 1.143rem 0.571rem 0.571rem;
        border-radius: 0.571rem;
        background-color: #2b435366;
      }
      .msg-list {
        display: flex;
        flex-direction: column;
        gap: 0.143rem;
        overflow-y: auto;
        scrollbar-gutter: stable;
        .msg-item {
          display: grid;
          grid-template-columns: 2.286rem auto 2.857rem;
          gap: 0.571rem;
          align-items: center;
          padding: 0.571rem;
          color: #97bad1;
          line-height: 1.286rem;
          border-radius: 0.571rem 0.571rem 0 0;
        }
        .msg-index {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 2.286rem;
          height: 2.286rem;
          border-radius: 0.571rem;
          background-color: #2843558f;
          font-size: 1.143rem;
          font-weight: 600;
          color: #628196;
        }
      }
    }
  }
}
</style>
